<template>
  <div class="liststar">
    <div class="switchover">
      <van-tabs v-model="active" animated>
        <van-tab
          title="创建歌单"
          :to="{ name: 'creatlist', params: { id: 1 } }"
        >
        </van-tab>
        <van-tab title="收藏歌单">
          <div class="playlist">
            <!-- <h2>创建的歌单</h2> -->
            <ul>
              <li v-for="(item, index) in playlist" :key="index" @click="skip(item.id)">
                <img :src="item.coverImgUrl" alt="" />
                <span>{{ item.name }}</span>

                <p>
                  <i v-for="(item, index) in item.tags" :key="index">
                    {{ item }}
                  </i>
                </p>
                <van-icon name="delete-o" @click="del(item.id)" />
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab
          title="歌单助手"
          :to="{ name: 'listhelper', params: { id: 1 } }"
        ></van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Icon } from "vant";

Vue.use(Icon);
Vue.use(Tab);
Vue.use(Tabs);
import { getsingleAPI, getmoverAPI, getmoAPI } from "../../../api/song";
import { Toast } from "vant";
export default {
  name: "liststar",
  data() {
    return {
      id: "",
      name: "",
      playlist: "",
      active: 1,
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    const id = this.$route.params.id;
    console.log(id);

    let uid = localStorage.getItem("uid");
    console.log(uid);

    // 调用数据
    this.getsingle(uid);

    //  获取路由传来的id
    this.id = this.$route.params.id;
    console.log(this.id);
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    //获取歌单
    async getsingle(uid) {
      const result = await getsingleAPI(uid);
      console.log(result);
      this.playlist = result.playlist;
      // this.id = result.playlist;
      // console.log(id);
    },

    //删除歌单
    del(id) {
      console.log(id);
      getmoverAPI(id).then(
        (res) => {
          Toast.success("删除成功");
          console.log(res);
        },
        (err) => {
          console.log(err);
          getmoAPI(id).then((result) => {
            console.log(result);
            Toast.success("删除成功");
          });
        }
      );
      // console.log(result);
    },

  skip(id){
    this.$router.push(`/songlistdetail/${id}`)
    console.log(id);
  }
  },
};
</script>

<style scoped>
.switchover .van-icon {
  font-size: 30px;
  position: absolute;
  margin-left: 85%;
  margin-top: 25px;
  color: #555;
}
.switchover {
  position: relative;
  width: 90%;
  margin: 20px auto 0;
}
.col {
  display: flex;
  width: 95%;
  margin: 0 auto;
  height: 50px;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-around;
}
.playlist {
  width: 102%;
  height: 100%;
  /* border: 2px solid #ccc; */
  border-radius: 20px;
  margin: 10px auto;
}
.playlist ul {
  width: 90%;
  margin: auto;
  padding-bottom: 10px;
}
.playlist ul li {
  /* border-bottom: 1px solid #ccc; */
  /* float: left; */
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  position: relative;
}
.playlist ul li img {
  width: 80px;
  height: 80px;
  vertical-align: middle;
}
.van-cell {
  background: 0;
  display: inline;
}
.playlist ul li span {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  margin-top: 15px;
}
.playlist ul li i {
  padding-top: 10px;
}
.playlist ul li span {
  height: 18px;
}
.playlist ul li p {
  padding-top: 50px;
  height: 20px;
  position: absolute;
  left: 90px;
}
/* .van-button--info{
  padding-left:100px
} */
</style>
